<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>个人资料</title>
    <link rel="stylesheet" href="__STATIC__/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="__STATIC__/admin/css/other/person.css"/>
    {include file='public/head.html'}
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-body" style="padding: 20px;">
                <div class="text-center layui-text">
                    <div class="user-info-head" id="userInfoHead">
                        <img src="{$vo._avatar}" id="userAvatar" width="115px" height="115px" alt="avatar"/>
                    </div>
                    <h3>{$vo.nickname}</h3>
                    <p style="margin:0;">{$vo.about}</p>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                个人信息
            </div>
            <div class="layui-card-body">
                <form class="layui-form" action="{:url('edit')}" method="post">
                    <div class="layui-form-item">
                        <label class="layui-form-label">昵称</label>
                        <div class="layui-input-block">
                            <input type="text" name="nickname" lay-verify="required" lay-reqtext="请输入昵称" placeholder="请输入昵称" value="{$vo.nickname}" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">格言</label>
                        <div class="layui-input-block">
                            <input type="text" name="bio" placeholder="请输入格言" value="{$vo.bio}" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">QQ号</label>
                        <div class="layui-input-block">
                            <input type="text" name="qq" placeholder="请输入QQ号" value="{$vo.qq}" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">手机</label>
                        <div class="layui-input-block">
                            <input type="text" name="mobile" lay-verify="phone" placeholder="请输入手机号" value="{$vo.mobile}" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" value="{$vo.email}" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button type="submit" class="layui-btn layui-btn layui-btn-sm" style="float: right" lay-submit="" lay-filter="save">
                            <i class="layui-icon layui-icon-ok"></i>
                            修改
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                累计登录 {$vo.login_count} 次
            </div>
            <div class="layui-card-body">
                <ul class="list">
                    <li class="list-item"><span class="title">上次时间</span><span class="footer">{:date('Y-m-d H:i:s', $vo['login_time'])}</span></li>
                    <li class="list-item"><span class="title">上次IP</span><span class="footer">{$vo.login_ip|long2ip}</span></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-header">
                <h3>操作日志</h3>
            </div>
            <div class="layui-card-body" style="padding-top:0;">
                <table class="layui-hide" id="currentTable" lay-filter="currentTable"></table>
            </div>
        </div>
    </div>
</div>
<script src="__STATIC__/component/layui/layui.js"></script>
<script src="__STATIC__/component/pear/pear.js"></script>
<script>
    layui.use(['jquery', 'element', 'layer', 'convert', 'aphp', 'form', 'aphpTable'], function () {
        let element = layui.element,
            layer = layui.layer,
            $ = layui.jquery,
            convert = layui.convert,
            aphp = layui.aphp,
            aphpTable = layui.aphpTable,
            form = layui.form;

        let init = {
            table_elem: '#currentTable',
            table_render_id: 'currentTable',
            detail_url: "{:url('detail')}",
        };

        aphpTable.render({
            init: init,
            search: false,
            toolbar: ['refresh_table'],
            url: "{:url('index')}",
            cols: [
                [
                    { title: 'ID', field: 'id', width: 100, align: 'center'},
                    { title: '操作', field: 'title'},
                    { title: '方法', field: 'controller', templet: '<div>{{d.controller}} - {{d.method}}</div>'},
                    { title: 'IP', field: 'ip'},
                    { title: '时间', field: 'create_time' ,templet: aphpTable.formatter.datetime },
                    { title: '操作', align: 'center', templet: aphpTable.formatter.tool, operat:  [
                            [{
                                title: '详情',
                                text: '详情',
                                url: init.detail_url,
                                method: 'open',
                                icon: 'layui-icon layui-icon-search',
                                class: 'layui-btn layui-btn-xs layui-btn-normal',
                            }]
                        ]
                    },
                ]
            ],
            page: {}
        });

        aphpTable.bindEvent();

        let image = new Image();
        image.src = "{$vo._avatar}?" + Math.random();
        image.onload = function () {
            $("#userAvatar").attr("src", convert.imageToBase64(image));
        }

        window.callback = function (data) {
            layer.close(data.index);
            let post = {form: {action: "{:url('api/base64_upload')}"}, field: {base64: data.newAvatar, api: 'avatar'}};
            aphp.request.postForm(post, 0, function () {
                $("#userAvatar").attr("src", data.newAvatar);
            });
        }

        // 更换头像
        $(document).on('click', '#userAvatar', function() {
            layer.open({
                type: 2,
                title: '更换头像',
                shade: 0.1,
                area: ["900px", "530px"],
                content: "{:url('avatar')}",
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    window['layui-layer-iframe' + index].submitForm();
                }
            });
        });

        form.on('submit(save)', function (data) {
            aphp.request.postForm(data, 2);
            return false;
        });

    });
</script>
</body>
</html>